<template>
  <d2-container :filename="filename">
    <el-row :gutter="20">
      <el-col :span="16" class="dragDemo">
        <draggable
          class="list-group"
          element="div"
          v-model="listLeft"
          :options="dragOptions1"
          :move="onMove"
          @start="isDragging = true"
          @end="isDragging = false"
        >
          <el-form
            label-width="80px"
            v-for="(item, key) in listLeft"
            :key="key"
          >
            <el-form-item :label="item.name">
              <el-input v-model="item.value"></el-input>
            </el-form-item>
          </el-form>
          <!-- <div v-for="(item, key) in listLeft" :key="key">
          <img src="http://oss.shangmian.xin/ciBm3U1544694909000?imageslim" />
          {{ item.name }}-{{ item.value }}
        </div> -->
        </draggable>

        <draggable
          class="list-group"
          element="div"
          v-model="listRight"
          :options="dragOptions2"
          :move="onMove"
          @start="rightStart"
          @end="rightEnd"
        >
          <!-- <div v-for="(item, key) in listRight" :key="key">
          <img src="http://oss.shangmian.xin/ciBm3U1544694909000?imageslim" />
          {{ item.name }}-{{ item.value }}
        </div> -->
          <el-form
            label-width="80px"
            v-for="(item, key) in listRight"
            :key="key"
          >
            <el-form-item :label="item.name">
              <el-input v-model="item.value"></el-input>
            </el-form-item>
          </el-form>
        </draggable>
      </el-col>
      <el-col :span="4" class="dragDemo">
        这是属性
      </el-col>
    </el-row>
    <!-- <div class="dragDemo">

      <draggable
        class="list-group"
        element="div"
        v-model="listLeft"
        :options="dragOptions1"
        :move="onMove"
        @start="isDragging = true"
        @end="isDragging = false"
      >
        <div v-for="(item, key) in listLeft" :key="key">
          <img src="http://oss.shangmian.xin/ciBm3U1544694909000?imageslim" />
          {{ item.name }}-{{ item.value }}
        </div>
      </draggable>

      <draggable
        class="list-group"
        element="div"
        v-model="listRight"
        :options="dragOptions2"
        :move="onMove"
        @start="rightStart"
        @end="rightEnd"
      >
        <div v-for="(item, key) in listRight" :key="key">
          <img src="http://oss.shangmian.xin/ciBm3U1544694909000?imageslim" />
          {{ item.name }}-{{ item.value }}
        </div>
      </draggable>
    </div> -->
  </d2-container>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'pageWrit',
  components: { draggable },
  data () {
    return {
      filename: __filename,
      isDragging: false,
      listLeft: [{
        name: '数据一',
        value: '1'
      }, {
        name: '数据二',
        value: '2'
      }, {
        name: '数据三',
        value: '3'
      }, {
        name: '数据四',
        value: '4'
      }, {
        name: '数据五',
        value: '5'
      }],
      listRight: [],
      oldleftlist: []
    }
  },
  computed: {
    dragOptions1 () {
      return {
        animation: 0,
        group: {
          name: 'description',
          pull: 'clone'
        },
        ghostClass: 'ghost'
      }
    },
    dragOptions2 () {
      return {
        animation: 0,
        group: 'description'
      }
    }
  },
  methods: {
    onMove ({ relatedContext, draggedContext }) {
      const relatedElement = relatedContext.element
      const draggedElement = draggedContext.element
      return (
        (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
      )
    },
    rightStart () {
      this.oldleftlist = this.listLeft.concat()
      this.isDragging = true
    },
    rightEnd () {
      this.isDragging = false

      this.listLeft = this.oldleftlist.concat()
    }
  }

}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
.dragDemo {
  display: flex;
  justify-content: center;
  color: #555;
  .list-group {
    width: 50%;
    border: 1px solid #ddd;
    text-align: center;
    margin-right: 50px;
    > div {
      padding: 10px;
      border-bottom: 1px dashed #ddd;
      img {
        width: 25px;
        height: 25px;
        vertical-align: middle;
        padding-right: 10px;
      }
    }
  }
}
</style>
